<template>
    <!-- 内容盒子 -->
    <view :style="fullStyle" class="contact-detail-root">
        <view class="content">
            <!-- 详情 begin -->
            <view class="content-item-1">
                <image :src="concatInfo.liaisonPic"></image>
                <contact-info :concat-info="concatInfo" :show-contact-card-button="true"></contact-info>
            </view>
            <!-- 详情 end -->
            <!-- 服务 begin -->
            <view class="content-item-2">
                <view class="grid service-1">
                    <view class="info"
                        @click="goSubPage(`${recentTrendPath}?liaisonId=${concatInfo.id}&liaisonName=${concatInfo.liaisonName}&liaisonId=${liaisonId}`)">
                        <view class="title">近期动态</view>
                        <view class="into">点击进入</view>
                    </view>
                </view>
                <view class="grid service-2">
                    <view class="info" @click="goLeaveAMessagePage">
                        <view class="title">联络站留言</view>
                        <view class="into">点击进入</view>
                    </view>
                </view>
            </view>
            <!-- 服务 end -->
            <!-- 代表委员列表 begin -->
            <view class="content-item-3">
                <view class="header">
                    <view class="title">驻站代表委员</view>
                </view>
                <view class="row" v-show="representativeList != null && representativeList.length > 0">
                    <navigator @click="goSubPage(`${cadrePath}?representativeId=${representativeItem.id}`)"
                        v-for=" (representativeItem,index) in representativeList" :key="representativeItem.id"
                        class="grid">
                        <view class="item">
                            <view class="info">
                                <view class="avatar">
                                    <image :src="representativeItem.representativePic" class="avatar"></image>
                                </view>
                                <view class="detail">
                                    <view class="cont">
                                        <view class="name">
                                            {{ representativeItem.representativeName }}
                                        </view>

                                    </view>
                                    <view class="tag-container">
                                        <view class="speciality-item "
                                            v-for="(roleItem,roleIndex) in representativeItem.roles" :key="roleItem">
                                            {{ roleItem }}
                                        </view>
                                    </view>
                                    <view class="position">
                                        {{ representativeItem.representativeDesc }}
                                    </view>
                                    <view class="speciality"
                                        v-if="Array.isArray(representativeItem.representativeMajors) && representativeItem.representativeMajors.length > 0">
                                        <view class="speciality-label">
                                            专业领域：
                                        </view>
                                        <view
                                            v-for="(representativeMajorItem,representativeMajorIndex) in representativeItem.representativeMajors"
                                            :key="representativeMajorItem.id" class="tag-item">
                                            {{ representativeMajorItem.majorName }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="more">向ta反映诉求&nbsp;&gt;</view>
                        </view>
                    </navigator>
                </view>
                <empty v-show="representativeList == null || representativeList.length <= 0"></empty>
            </view>
            <!-- 代表委员列表 end -->
        </view>
    </view>
</template>

<script>
    import {
        GET_LIAISON_DETAIL
    } from "@/api/contact";
    import {
        baseMixins
    } from "@/mixins/baseMixins";
    import {
        baseFilePath,
        cadrePath,
        defaultAvatar,
        messagePath,
        recentTrendPath
    } from "@/until/publicConfig";
    import {
        getFileAccessHttpUrl
    } from "@/until/fileUtil";
    import ContactInfo from "@/compontent/contactInfo";
    import {
        loginCheck
    } from "@/until/userLogin";
    import {
        requestGet
    } from "@/until/means/request";
    import empty from "@/compontent/empty/index.vue";

    export default {
        mixins: [baseMixins],
        components: {
            ContactInfo,
            empty
        },
        data() {
            return {
                concatInfo: {},
                loading: false,
                liaisonId: '',
                representativeList: [],
                recentTrendPath,
                messagePath,
                cadrePath,
            }
        },
        // 分享给朋友
        onShareAppMessage(res) {
        	return {
        		title: this.concatInfo.liaisonName,
        		path: '/pages/home/contact-detail?liaisonId='+this.concatInfo.id,
        		imageUrl: this.concatInfo.liaisonPic,
        	}
        },
        // 分享到朋友圈
        onShareTimeline(res) {
        	return {
        		title: this.concatInfo.liaisonName,
        		path: '/pages/home/contact-detail?liaisonId='+this.concatInfo.id,
        		imageUrl: this.concatInfo.liaisonPic,
        	}
        },
        onLoad(obj) {
            console.log(obj);
               
            if(obj.q){
                console.log(obj.q);
                console.log(111111111111);
                const url = decodeURIComponent(obj.q) // 获取到二维码原始链接内容
               
                let params = this.getParams(url);
                console.log(params);
                 this.liaisonId = params.liaisonId
            }else{
                 this.liaisonId = obj.liaisonId
            }
           
            this.loadConcatInfo()
        },
        methods: {

            loadConcatInfo() {
                let {
                    liaisonId
                } = this
                this.loading = true;
                requestGet({
                    url: GET_LIAISON_DETAIL,
                    data: {
                        liaisonId
                    }
                }).then(res => {
                    if (!res) return
                    this.concatInfo = res.liaison
                    this.concatInfo.liaisonMpQr = getFileAccessHttpUrl(this.concatInfo.liaisonMpQr)
                    this.concatInfo.liaisonPic = this.concatInfo.liaisonPic != null && this.concatInfo
                        .liaisonPic !== '' ? getFileAccessHttpUrl(this.concatInfo.liaisonPic) :
                        `${baseFilePath}/contact-station-cover-default1.png`;

                    this.representativeList = res.representativeList.map(representativeItem => {
                        representativeItem.representativePic = representativeItem.representativePic !=
                            null && representativeItem.representativePic !== '' ? getFileAccessHttpUrl(
                                representativeItem.representativePic) : defaultAvatar
                        return representativeItem
                    })
                }).finally(() => {
                    this.loading = false;
                })
            },
            async goLeaveAMessagePage() {
                if (!await loginCheck()) {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    })
                    return
                }
                this.goSubPage(
                    `${messagePath}?liaisonId=${this.concatInfo.id}&liaisonName=${this.concatInfo.liaisonName}`)
            },
        }
    }
</script>

<style lang='scss' scoped>
    .content {
        padding: 0 30rpx;
        color: #222222;
    }

    .content-item-1 {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: $bg-color-white;
        margin-top: 30rpx;
        font-size: $font-size-medium;
        border-radius: 30rpx 30rpx 0 0;

        image {
            border-radius: 30rpx;
            width: 100%;
            height: 360rpx;
        }
    }

    .content-item-2 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 30rpx 0;

        .grid {
            display: flex;
            flex-direction: column;
            width: 48%;
            background-size: 100%;
            background-repeat: no-repeat;

            .info {
                padding: 26rpx 0 0 20rpx;

                .title {
                    color: #3A78FE;
                    font-size: $font-size-base;
                }

                .into {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 120rpx;
                    height: 40rpx;
                    color: #FFFFFF;
                    background: #3b78fe;
                    font-size: $font-size-extra-sm;
                    border-radius: $border-radius-lg;
                    margin-top: 18rpx;
                }
            }
        }


        .service-1 {
            height: 150rpx;
            background-image: url($base-path + '/crowd/trends-bg@2x.png');

            .info {
                .title {
                    color: #B90303;
                }

                .into {
                    color: #FFFFFF;
                    background: #F34416;
                }
            }
        }

        .service-2 {
            height: 150rpx;
            background-image: url($base-path + '/crowd/message-bg@2x.png');

            .info {
                .title {
                    color: #B90303;
                }

                .into {
                    color: #FFFFFF;
                    background: #F34416;
                }
            }
        }
    }

    .content-item-3 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30rpx 0;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20rpx;

            .title {
                font-size: $font-size-lg;
                font-weight: 600;
                color: #222222;
                line-height: 35rpx;
                letter-spacing: 10rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .subtitle {
                font-size: $font-size-base;
                color: $text-color-grey;
            }
        }

        .row {
            display: flex;
            flex-wrap: wrap;

            .grid {
                display: flex;
                justify-content: space-between;
                width: 100%;
                background: #FFF;
                margin: 20rpx 0;

                .item {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    padding: 30rpx 20rpx;
                    // padding: 30rpx 20rpx;
                    position: relative;

                    .info {
                        display: flex;
                        width: 100%;
                        overflow: hidden;

                        .avatar {
                            width: 160rpx;
                            height: 200rpx;
                            border-radius: 20rpx;

                            image {
                                width: 100%;
                                height: 100%;
                                border-radius: 20rpx;
                            }
                        }

                        .detail {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            width: calc(100% - 160rpx);
                            box-sizing: border-box;
                            padding-left: 30rpx;

                            .cont {
                                display: flex;
                                width: calc(100% - 70rpx);
                                flex-wrap: wrap;
                                margin-bottom: 20rpx;

                                .name {
                                    color: #222222;
                                    font-size: 30rpx;
                                    margin-right: 24rpx;
                                    display: flex;
                                    align-items: center;
                                }
                            }

                            .tag-container {
                                width: 100%;
                                flex-wrap: wrap;
                                display: flex;

                                .speciality-item {
                                    border-radius: 10rpx;
                                    border: 1rpx solid #828282;
                                    padding: 10rpx;
                                    font-weight: normal;
                                    font-size: 22rpx;
                                    color: #828282;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                    margin: 0 10rpx 10rpx 0;
                                }

                            }

                            .position {
                                width: 100%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                color: #707070;
                                font-size: $font-size-base;
                                margin: 20rpx 0;
                            }

                            .speciality {
                                width: fit-content;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                margin-bottom: 10rpx;

                                .speciality-label {
                                    font-weight: 600;
                                    font-size: 22rpx;
                                    color: #707070;
                                    text-align: center;
                                    font-style: normal;
                                    text-transform: none;
                                    margin: 0 10rpx 10rpx 0;
                                    display: flex;
                                    align-items: center;
                                }

                                .tag-item {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background: #FEDADA;
                                    color: #BD0E0E;
                                    border-radius: $border-radius-lg;
                                    font-size: 22rpx;
                                    padding: 10rpx 12rpx;
                                    margin-right: 10rpx;
                                }

                            }
                        }
                    }

                    .more {
                        position: absolute;
                        right: 20rpx;
                        color: #828282;
                        font-size: $font-size-base;
                    }
                }
            }
        }
    }
</style>